菜菜菜的 Vue 30天 - Day24

好咧～昨天介紹了 vue-cli 在專案初始時對 vue-router 的配置。

接下來要介紹更深入的用法。

路由切換

上一章有介紹配置路由的部分，如果有多個路由如下面程式碼，該如何在路由間切換呢？！

routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloandy',
      name: 'HelloAndy',
      component: HelloAndy
    }
  ]

首先我們先來看一下 App.vue 的這段程式碼：

 <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
</div>

有一個 tag 是 <router-view />，這個就是會渲染當前路徑指定的 component，所以在路由切換的時候會在這顯示不同的內容。

路由切換

接下來要怎麼觸發路由的切換呢？！有 2 個方式：

1. <router-link>

router-link 就字面上的意思也還蠻好理解的就是路徑的連結。

router-link 預設會解析成 HTML 的 <a></a>

使用方式如下：

<router-link to="/helloWorld">World</router-link>
<router-link to="/helloAndy">World</router-link>

<router-link> tag 內能夠帶幾個屬性

• tag
• to

tag

上面有提到 router-link 預設會解析成 HTML 的 <a></a>，但是很多時候我們會想要使用其他 HTML tag 也能夠導向其他路徑，有 2 個方式：

1. 第一個就是直接用 router-link 將目標 HTML tag 包起來，就像我們使用 <a></a> 把其他 HTML tag 包起來是一樣的。

2. 第二個是使用 tag 這個屬性，顧名思義就是能夠指定 router-link 解析成指定的 tag

to

to 這個屬性內會撰寫要導向的路徑，例如： to="/helloWorld"

另外 to 還能夠動態綁定以下屬性：

• path
• name
• params

name

name 這個屬性其實就跟 to 很像，也是指定要導向的路徑，但是他填入的不是路徑，而是這個路徑的 name，前一章有提到在設置 routes 的時候能夠為 path 做命名也就是使用在這個時候

:to="{ name: 'user' }"

params

params 屬性的設置能夠讓我們使用動態的路徑

我們假設一個情境是有一個頁面是使用者的清單列出簡單的資訊，點擊後能夠到另一個頁面顯示該使用者的詳細資訊。

因為不管點哪一個使用者我們導向的都是同一個頁面，這時候我們就能配置動態路由，並根據 params 的不同來顯示不同使用者資訊。

使用方式如下：

<router-link :to="{ name: 'user', params: { userId: 1 }}">User</router-link>

特別要注意的是 path 及 params 不能夠同時出現，所以 name 跟 params 會搭配使用

要使用 path 做動態路徑的話就用以下方法：

<router-link :to="`/${userId}`">World</router-link>

2. this.$router.push

接下來要介紹的是直接使用 this.$router.push() 來做路徑的導向，使用的的方式其實跟使用 router-link 很像，不同的是 this.$router.push() 不是寫在 template 內，而是寫在某個 function 內。

完整使用方式如下：

this.$router.push({ name: 'user', params: { userId: 1 }})

是不是覺得很像呢，我們只要把原本 :to 裡面的內容放入 push 裡面就能夠執行路徑的導向。

另外使用 router.push 的方式定義路徑的話，也能夠使用以下方式帶 query 參數

const date = '2018-11-08'
router.push({ path: 'searchresult', query: { date: `${date}` }})

//path 會導向 /searchresult?date=2018-11-08

當然也能夠用最原始的方式也是能夠達到一樣效果：

router.push({ path: 'searchresult?date=2018-11-08'})

巢狀路由

我們導向一個頁面時，這個頁面或許還會有子路徑，所以我們的 path 可能會不止一層，接下來我們就需要建立巢狀路由。

那該怎麼建立呢，我們就在需要建立巢狀路由的路由內添加 children ，如下：

routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloandy',
      name: 'HelloAndy',
      component: HelloAndy,
      children: [
        {
          path: 'good',
          component: IsGood
        }
      ]
    }
  ]

childen 內撰寫路徑的方法就跟父層的一樣，相同的我們也需要在 HelloAndy 這個 component 內加上 <router-view></router-view> 讓 Vue 知道要在 HelloAndy 的哪個地方放置 IsGood 做渲染。

<div class="hello">
    <h1>Hello Andy</h1>
    <router-view/>
</div>

接下來只要路徑符合 /helloandy/good 就會渲染了。

redirect

上面提到了只要路徑符合 /helloandy/good 就會渲染 Isgood 的內容，但是我們最上面設置的 <router-link></router-link> 路徑是導向 helloworld 以及 helloandy

<router-link to="/helloWorld">World</router-link>
<router-link to="/helloAndy">World</router-link>

這樣子並不會導向我們想看到的 IsGood 的內容，所以我們有 2 個方式能夠解決。

1. 第一個就是直接把 to 裡面的 path 直接改成 /helloandy/good

2. 第二個就是使用 redirect，怎麼使用呢？

routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloandy',
      name: 'HelloAndy',
      component: HelloAndy,
      redirect: '/helloandy/good',
      children: [
        {
          path: 'good',
          component: IsGood
        }
      ]
    }
  ]

設定 redirect 後，在我們到 /helloandy 時會自動幫我們導向 redirect 設定的路徑了。

以上就是 vue-router 在使用上會比較常使用的功能了～